<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./header.css">
    <link rel="stylesheet" href="../bottom/bottom.css">
    <link rel="stylesheet" href="../swiper-bundle.min.css">
    <style>
        #header-tp {
            height: 510px;
            width: 100%;
            /* background-color: pink; */
        }

        /* 轮播图 */
        .swiper-container {
            width: 100%;
            height: 100%;
            margin-left: auto;
            margin-right: auto;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        #index-cd {
            top: 160px;
            left: 55%;
            position: absolute;
            width: 40%;
            height: 480px;

            z-index: 88;
            /* opacity: 0.5; */
        }

        #index-cd .flex-container {
            float: left;
            width: 100%;
            height: 480px;

        }

        #index-cd .flex-container .flex-item {
            float: left;
            margin-right: 2%;
            margin-top: 5%;
            width: 48%;
            height: 200px;

            background-color: #00000080;

        }

        #index-cd .flex-container .flex-item span {
            position: absolute;
            font-size: 20px;
            color: #fff;
            margin-left: 30px;
            padding-top: 40px;
            padding-bottom: 10px;
            transition: 1s;
        }

        #index-cd .flex-container .flex-item .ad {

            width: 24px;
            height: 1px;
            background-color: #fff;
            margin-top: 75px;
            margin-left: 31px;
            transition: width .5s;

        }
    </style>
</head>
<div>
    <script src="./header.js"></script>
    <div>
        <!-- 轮播图部分制作start -->
        <div id="header-tp">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="../img/index/1.jpg" alt="" style="width: 100% ;height: 100%;">
                    </div>
                    <div class="swiper-slide"><img src="../img/index/2.jpg" alt="" style="width: 100% ;height: 100%;">
                    </div>
                    <div class="swiper-slide"><img src="../img/index/3.jpg" alt="" style="width: 100% ;height: 100%;">
                    </div>
                    <div class="swiper-slide"><img src="../img/index/4.jpg" alt="" style="width: 100% ;height: 100%;">
                    </div>
                    <div class="swiper-slide"><img src="../img/index/5.jpg" alt="" style="width: 100% ;height: 100%;">
                    </div>
                    <div class="swiper-slide"><img src="../img/index/6.jpg" alt="" style="width: 100% ;height: 100%;">
                    </div>
                    <div class="swiper-slide"><img src="../img/index/1.jpg" alt="" style="width: 100% ;height: 100%;">
                    </div>

                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
                <!-- Add Arrows -->
                <!-- <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div> -->
            </div>
            <!-- 轮播图部分制作end -->
        </div>
        <div id="index-cd">
            <div class="flex-container">
                <div class="flex-item">
                    <span>招商加盟</span>
                    <div class="ad"></div>
                    <!-- <div class="bian"></div> -->
                </div>
                <div class="flex-item">
                    <span>OEM食品代加工</span>
                    <div class="ad"></div>
                    <!-- <div class="bian"></div> -->
                </div>
                <div class="flex-item">
                    <span>旺旺在世界</span>
                    <div class="ad"></div>
                    <!-- <div class="bian"></div> -->
                </div>
                <div class="flex-item">
                    <span>职业发展</span>
                    <div class="ad"></div>
                    <!-- <div class="bian"></div> -->
                </div>
            </div>
        </div>
        <script>
            var it = document.getElementsByClassName('flex-item');
            var adc = document.getElementsByClassName('ad');
            var t = true;
            it[0].onmousemove = function () {
                if (t) {

                    adc[0].style.width = 75 + "px";

                }

            };
            it[0].onmouseout = function () {
                if (t) {

                    adc[0].style.width = 24 + "px";

                }

            };

            it[1].onmousemove = function () {
                if (t) {

                    adc[1].style.width = 148 + "px";

                }

            }
            it[1].onmouseout = function () {
                if (t) {

                    adc[1].style.width = 24 + "px";

                }

            };

            it[2].onmousemove = function () {
                if (t) {

                    adc[2].style.width = 100 + "px";

                }

            }
            it[2].onmouseout = function () {
                if (t) {

                    adc[2].style.width = 24 + "px";

                }

            };

            it[3].onmousemove = function () {
                if (t) {

                    adc[3].style.width = 75 + "px";

                }

            };
            it[3].onmouseout = function () {
                if (t) {

                    adc[3].style.width = 24 + "px";

                }

            };

        </script>
        <script src="../index.js"></script>
        <script src="../swiper-bundle.min.js"></script>
        <!-- <script src="../bottom/bottom.js"></script> -->
    </div>

    <body>

    </body>

</html>